<!DOCTYPE html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>jsTree</title>
	<meta name="viewport" content="width=device-width" />
	<!--[if lt IE 9]><script src="http://static.jstree.com/3.0.8/assets/html5.js"></script><![endif]-->
	
	<meta name="robots" content="index,follow" />
	<link rel="stylesheet" href="http://static.jstree.com/3.0.8/assets/bootstrap/css/bootstrap.min.css" />
	<link rel="stylesheet" href="http://static.jstree.com/3.0.8/assets/dist/themes/default/style.min.css" />
	<link rel="stylesheet" href="http://static.jstree.com/3.0.8/assets/docs.css" />
	
	
	<link rel="icon" href="http://static.jstree.com/3.0.8/assets/favicon.ico" type="image/x-icon" />
	
	<script>window.$q=[];window.$=window.jQuery=function(a){window.$q.push(a);};</script>
<script>WR = "/";</script></head>
<body>
	
	

				
				<div class="tab-content">
					<div id="json" class="tab-content-item">

				<div class="row">
					<div class="col-md-12">
						<h3><i class="glyphicon glyphicon-leaf"></i> Populating the tree using JSON</h3>
					</div>
				</div>
				<h4>The format</h4>
				<div class="row">
					<div class="col-md-6">
						<p>jsTree needs a specific format to work with JSON. In the standard syntax no fields are required - pass only what you need. Keep in mind you will be able to access any additional properties you specify - jsTree won't touch them and you will be able to use them later on.</p>
						<p>To change the icon of the node use the <code>icon</code> property. Specifying a string containing a <code>/</code> will display that image as the node icon. Using any other string will apply that class to the <code>&lt;i&gt;</code> element that is used to represent the icon. You can use boolean <code>false</code> to make jsTree render the node with no icon.</p>
						<p>You can set the state on a node using the <code>state</code> property. Use any combination of the following: <code>opened</code>, <code>selected</code>, <code>disabled</code>.</p>
						<p>Both <code>li_attr</code> and <code>a_attr</code> are passed directly to jQuery's attr function.</p>
						<p>When using AJAX set <code>children</code> to boolean <code>true</code> and jsTree will render the node as closed and make an additional request for that node when the user opens it.</p>
						<p>Any nested children should either be objects following the same format, or plain strings (in which case the string is used for the node's text and everything else is autogenerated).</p>
					</div>
					<div class="col-md-6">
						<pre><code><span class="comment">// Expected format of the node (there are no required fields)</span>
{
  id          : "string" <span class="comment">// will be autogenerated if omitted</span>
  text        : "string" <span class="comment">// node text</span>
  icon        : "string" <span class="comment">// string for custom</span>
  state       : {
    opened    : boolean  <span class="comment">// is the node open</span>
    disabled  : boolean  <span class="comment">// is the node disabled</span>
    selected  : boolean  <span class="comment">// is the node selected</span>
  },
  children    : []  <span class="comment">// array of strings or objects</span>
  li_attr     : {}  <span class="comment">// attributes for the generated LI node</span>
  a_attr      : {}  <span class="comment">// attributes for the generated A node</span>
}</code></pre>
					</div>
				</div>
				<h4>Alternative JSON format</h4>
				<div class="row">
					<div class="col-md-6">
						<p>If you do not want to use the nested <code>children</code> approach, you can use the alternative syntax where each node object has two required fields: <code>id</code> &amp; <code>parent</code> and no <code>children</code> property (everything else remains the same).</p>
						<p>jsTree will automatically build the hierarchy. To indicate a node should be a root node set its <code>parent</code> property to <code>"#"</code>.</p>
						<p>This should be used mainly when you render the whole tree at once and is useful when data is stored in a database using adjacency.</p>
					</div>
					<div class="col-md-6">
						<pre><code><span class="comment">// Alternative format of the node (id &amp; parent are required)</span>
{
  <strong>id          : "string"</strong> <span class="comment">// required</span>
  <strong>parent      : "string"</strong> <span class="comment">// required</span>
  text        : "string" <span class="comment">// node text</span>
  icon        : "string" <span class="comment">// string for custom</span>
  state       : {
    opened    : boolean  <span class="comment">// is the node open</span>
    disabled  : boolean  <span class="comment">// is the node disabled</span>
    selected  : boolean  <span class="comment">// is the node selected</span>
  },
  li_attr     : {}  <span class="comment">// attributes for the generated LI node</span>
  a_attr      : {}  <span class="comment">// attributes for the generated A node</span>
}</code></pre>
					</div>
				</div>
				<h4>Using JSON</h4>
				<div class="row">
					<div class="col-md-4">
						<p>To populate the tree with a JSON object you need to use the <a href="/api/#/?f=$.jstree.defaults.core.data"><code>$.jstree.defaults.core.data</code></a> config option.</p>
						<p>The expected format is an array of nodes, where each node should be an object as described above or a simple string (in which case the string is used for the node's text property and everything else is autogenerated). Any nested nodes are supplied in the same manner in the <code>children</code> property of their parent.</p>
					</div>
					<div class="col-md-4">
						<pre><code>$('#using_json').jstree({ 'core' : {
    'data' : [
       'Simple root node',
       {
         'text' : 'Root node 2',
         'state' : {
           'opened' : true,
           'selected' : true
         },
         'children' : [
           { 'text' : 'Child 1' },
           'Child 2'
         ]
      }
    ]
} });</code></pre>
					</div>
					<div class="col-md-4">
						<div id="using_json" class="demo">
						</div>
						<script>
						$(function () {
							$('#using_json').jstree({ 'core' : {
							    'data' : [
							       'Simple root node',
							       {
							         'text' : 'Root node 2',
							         'state' : {
							           'opened' : true, 'selected' : true
							         },
							         'children' : [
							           { 'text' : 'Child 1' },
							           'Child 2'
							         ]
							      }
							    ]
							} });
						});</script>
					</div>
				</div>
				<h4>Using the alternative JSON format</h4>
				<div class="row">
					<div class="col-md-8">
						<pre><code>$('#using_json_2').jstree({ 'core' : {
    'data' : [
       { "id" : "ajson1", "parent" : "#", "text" : "Purpose" },
       { "id" : "ajson2", "parent" : "#", "text" : "Introduction" },
       { "id" : "ajson3", "parent" : "ajson2", "text" : "Organizational Structure" },
       { "id" : "ajson4", "parent" : "ajson2", "text" : "Financial Structure" },
       { "id" : "ajson5", "parent" : "ajson2", "text" : "Recurring Business Processes" }
    ]
} });</code></pre>
					</div>
					<div class="col-md-4">
						<div id="using_json_2" class="demo">
						</div>
						<script>
						$(function () {
							$('#using_json_2').jstree({ 'core' : {
							    'data' : [
							       { "id" : "ajson1", "parent" : "#", "text" : "Purpose" },
							       { "id" : "ajson2", "parent" : "#", "text" : "Introduction", "state" : { "opened" : true } },
							       { "id" : "ajson3", "parent" : "ajson2", "text" : "Organizational Structure" },
							       { "id" : "ajson4", "parent" : "ajson2", "text" : "Financial Structure" },
                                                                                                                                     { "id" : "ajson5", "parent" : "ajson2", "text" : "Recurring Business Processes" }
							    ]
							} });
						});</script>
					</div>
				</div>
				
					<div class="col-md-4">
				
					</div>
					<div class="col-md-4">
						<div id="using_json_3" class="demo"></div>
						
					</div>
				</div>
				
				<div class="row">
					
					
					<div class="col-md-4">
						<div id="using_json_4" class="demo"></div>
						
					</div>
				</div>

				</div></div>

			</div>
		</div>
	</div>

	<script src="http://static.jstree.com/3.0.8/assets/jquery-1.10.2.min.js"></script>
	<script src="http://static.jstree.com/3.0.8/assets/jquery.address-1.6.js"></script>
	<script src="http://static.jstree.com/3.0.8/assets/vakata.js"></script>
	<script src="http://static.jstree.com/3.0.8/assets/dist/jstree.min.js"></script>
	<script src="/static/site.js"></script>
	<script>$.each($q,function(i,f){$(f)});$q=null;</script>

<div id="top">


<h1><center>Program and Budget Office Primer</center></h1>


<p class=MsoNormal>&nbsp;</p>

<h2 style='margin-left:0in;text-indent:0in'>1.<span style='font:7.0pt "Times New Roman"'>
</span>Purpose:</h2>

<p>The purpose of this document is to provide the organizational and financial structure</p>

<h2 style='margin-left:0in;text-indent:0in'>2.<span style='font:7.0pt "Times New Roman"'>
</span>Introduction:</h2>

<p>
some challenges when answering requests for information from higher
headquarters and outside entities. </p>

<p>The primary audience for this document is the staff, but
others may also find it useful. This is not intended to be a comprehensive
compilation of all activities or to provide a step-by-step detailed description
of how work is accomplished. Rather, its purpose is to provide a
basic familiarity with structures and concepts useful for understanding how we
operate.</p>

<p>In the recognition that there is often a time lag for new
employees to obtain access to computer resources this document is provided in
both hard copy and electronic format. The electronic format does however
provide links to other resources that are not possible to reproduce for the
hard copy.</p>

<p>This primer is divided into three parts</p>

<p><span
style='font:7.0pt "Times New Roman"'>
</span><b>3.</b> Organizational Structure: a brief description to orient the reader as to
ARLs position in the chain of command and its internal organizational
structure. Much more detail is provided in other available documents.</p>

<p><span
style='font:7.0pt "Times New Roman"'>
</span><b>4. </b>Financial Structure: a more in-depth presentation of ARLs funding
sources and structure</p>

<p><span style='font:7.0pt "Times New Roman"'>
</span> <b>5. </b> Recurring Business Processes: summaries of large muscle movements for the PBO.</p>

<p>&nbsp;</p>



</body>
</html>

